<template>
  <view>
    <!-- #ifdef H5 -->
    <van-nav-bar @click-left="onClickLeft" left-arrow title="推荐站点"></van-nav-bar>
    <!-- #endif -->
    <!-- 电站列表 -->
    <QcscrollUni ref="mescrollRef" :getData="getData" :height="heightScroll">
      <view
        class="list-wrap"
        v-for="(item, index) in stationObj.list"
        :key="index"
        @tap="tapDetails(item)">
        <StationItem
          :item="item"
          @locationOpenBtm="locationOpenBtm"
          styleBox="list-item"></StationItem>
      </view>
    </QcscrollUni>
    <PopupBtm ref="locationOpenRef" @set-item="chooseType" />
  </view>
</template>

<script lang="ts" setup>
import StationItem from '@/pages/stationList/stationItem.vue';
import QcscrollUni from '@/components/qcscroll/qcscrollUni.vue';
import { queryStationRecommended } from '@/service/apis/station';
import { getLocationInfo, openLocation } from '@/utils/location';
import { getUserId, setToastInstance, systemInfo } from '@/mixins/info';
import PopupBtm from '@/components/popupBtm/popupBtm.vue';
// #ifdef MP-WEIXIN
import { useToast } from '@/components/wxToast';
setToastInstance(useToast());
// #endif

// 分享
onShareAppMessage(() => {
  return {
    title: '',
    path: '/pages/stationMap/stationMap',
  };
});

const locationOpenRef = ref();
const locationOpenItem = ref({} as any);

let heightScroll = ref(`100%`);
// #ifdef H5
heightScroll.value = `${systemInfo.screenHeight - systemInfo.navHeight}px`;
// #endif

// 电站列表
let stationObj = reactive({
  list: [] as Array<any>,
});
// 上拉加载的回调
const getData = (extraParams: { pageNum: number; pageSize: number }) => {
  return new Promise(resolve => {
    const info = getLocationInfo();
    const obj: any = {
      userLng: info.lng,
      userLat: info.lat,
    };
    const userId = getUserId();
    if (userId) {
      obj.userId = userId;
    }
    queryStationRecommended(obj, extraParams)
      .then((res: any) => {
        if (extraParams.pageNum === 1) {
          stationObj.list = res.list;
        } else {
          stationObj.list = [...stationObj.list, ...res.list];
        }
        resolve({ list: stationObj.list, total: res.total });
      })
      .catch(() => {
        resolve({ list: [], total: 0 });
      });
  });
};

// 点击事件-跳转电站详情
const tapDetails = (item: any) => {
  uni.navigateTo({
    url: `/pages/stationDetails/stationDetails?id=${item.id}`,
  });
};

// 打开地图弹窗
const locationOpenBtm = (item: any) => {
  locationOpenItem.value = item;
  locationOpenRef.value.open([
    {
      name: '高德地图',
      type: 'gd',
    },
    {
      name: '百度地图',
      type: 'bd',
    },
  ]);
};

// 底部弹窗选择地图
const chooseType = (type: string) => {
  openLocation({ ...locationOpenItem.value, type });
};

// #ifdef H5
const onClickLeft = () => {
  uni.navigateBack();
};
setTimeout(() => {
  const navBarEle = document.querySelector('.van-nav-bar') as HTMLElement;
  navBarEle.style.paddingTop = `${systemInfo.statusBarHeight}px`;
});
// #endif
</script>

<style lang="scss" scoped>
.input-wrap {
  display: flex;
  align-items: center;
  margin-left: 12px;
  .input-box {
    display: flex;
    align-items: center;
    width: 260px;
    height: 32px;
    border: 1px solid #f2f2f2;
    border-radius: 19px;
  }
  .input-search {
    width: 100%;
    margin: 0 17px;
    font-size: 12px;
    color: #545454;
  }
  .placeholder {
    color: #858585;
  }
}
.choose-wrap {
  display: flex;
  align-items: center;
  height: 37px;
  margin-top: 3px;
  font-size: 14px;
  color: #545454;
  text-align: center;

  .item {
    display: flex;
    justify-content: center;
    flex: 1;

    text {
      display: inline-block;
      white-space: nowrap;
      max-width: 70px;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }
  .icon-wrap {
    position: relative;
  }
  .icon {
    position: absolute;
    font-size: 6px;
    color: #858585;
    top: 6px;
    left: 5px;
  }
  .icon-down {
    transform: rotate(180deg);
  }
}
</style>